import React, { useState, useEffect } from 'react';
import Dropdown from '../components/Dropdown'; // 假设Dropdown组件和这个新组件在同一目录下

function PromptDropdown() {
  const [options, setOptions] = useState([]);
  const [selectedValue, setSelectedValue] = useState('default');

  useEffect(() => {
    // 发起请求获取提示列表
    const apiHost = import.meta.env.VITE_API_HOST || '';
    fetch(apiHost+`/prompt/list?page_size=1000`, {
      method: 'GET', 
    })
      .then((response) => response.json())
      .then((data) => {
        const formattedOptions = data.data.prompt.map((item: { keywords: string; id: string; }) => ({
          label: item.keywords,
          value: item.id, 
        }));

        // 在选项列表前添加一个"默认"选项
        formattedOptions.unshift({ label: 'default', value: 'default' });
        setOptions(formattedOptions);
      })
      .catch((error) => {
        console.error('Error fetching prompts:', error);
      });
  }, []);

  const handleSelect = (value: any) => {
    console.log('Selected:', value.value);
    setSelectedValue(value);
    sessionStorage.setItem('prompt',value.value);
  };

  return (
    <Dropdown
      options={options}
      selectedValue={selectedValue} // 控制选中项
      onSelect={handleSelect}
      placeholder="default"
    />
  );
}

export default PromptDropdown;